<template>
  <view class="guide-page">
    <view class="nav-bar">
      <text class="title">使用帮助</text>
    </view>
    
    <view class="content">
      <view class="section">
        <text class="section-title">输入方式说明</text>
        <view class="item">
          <text class="item-title">1. 手动输入</text>
          <text class="item-desc">直接输入想要学习的汉字，最多支持6个汉字。</text>
        </view>
        <view class="item">
          <text class="item-title">2. 单元选择</text>
          <text class="item-desc">选择教材中的单元（1-60单元），系统会从该单元中选取汉字。</text>
        </view>
        <view class="item">
          <text class="item-title">3. 拍照识别</text>
          <text class="item-desc">通过拍照识别汉字，系统会自动提取图片中的汉字。</text>
        </view>
      </view>

      <view class="section">
        <text class="section-title">难度说明</text>
        <view class="item">
          <text class="item-title">容易</text>
          <text class="item-desc">适合初学者，题目简单，重点突出。</text>
        </view>
        <view class="item">
          <text class="item-title">中等</text>
          <text class="item-desc">适合有一定基础的学习者，题目难度适中。</text>
        </view>
        <view class="item">
          <text class="item-title">较难</text>
          <text class="item-desc">适合进阶学习者，题目较为复杂。</text>
        </view>
      </view>

      <view class="section">
        <text class="section-title">语言风格说明</text>
        <view class="item">
          <text class="item-title">标准</text>
          <text class="item-desc">使用规范的教学语言。</text>
        </view>
        <view class="item">
          <text class="item-title">趣味</text>
          <text class="item-desc">加入有趣的元素，让学习更加生动。</text>
        </view>
        <view class="item">
          <text class="item-title">文学</text>
          <text class="item-desc">使用优美的文学语言。</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  uni.setNavigationBarTitle({
    title: '使用帮助'
  })
})
</script>

<style lang="scss">
.guide-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20rpx;

  .nav-bar {
    padding: 20rpx 0;
    margin-bottom: 30rpx;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .content {
    .section {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 30rpx;

      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }

      .item {
        margin-bottom: 20rpx;

        .item-title {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          margin-bottom: 10rpx;
          display: block;
        }

        .item-desc {
          font-size: 26rpx;
          color: #666;
          line-height: 1.6;
          display: block;
        }
      }
    }
  }
}
</style> 